<template>
	<view class="bgf">
		<custom-nav :title="'用印数据'"></custom-nav>
		<view class="f32 top-fixed">
			<view class="pl20 pr20 pt20">
				<segmented-control
					:segmentedList="segmentedList"
					:activeSegmented="activeSegmented"
					@clickItem="clickItem"
				></segmented-control>
			</view>
			<!-- <view class="df ac p20">
				<button class="default-button" v-for="item in tabList" :class="item.id === activeTab ?'active-button':''" :key="item.id" @tap="changeTab(item)">{{ item.text }}</button>
			</view> -->
		</view>
		<view class="container f30">
			<view
				v-show="activeSegmented === 1"
				class="card-content mt20 mb20"
				v-for="(sealItem, sealIndex) in sealNameData"
				:key="sealIndex"
			>
				<view class="mb30">
					<view class="c10 fw600">{{ sealItem }}</view>
				</view>
				<view class="flex-start">
					<view class="flex-1 flex-column ac border-r mr10">
						<view class="mb20 c10">{{
							sealIndex == 0
								? myProcessStat.totalNum
								: myProcessStat.auditTotalNum
						}}</view>
						<view class="be">全部</view>
					</view>
					<view class="flex-1 flex-column ac" v-if="sealIndex === 0">
						<view class="mb20 c10">{{
							myProcessStat.processNum
						}}</view>
						<view class="be">审批中</view>
					</view>
					<view class="flex-1 flex-column ac" v-if="sealIndex === 0">
						<view class="mb20 c10">{{
							myProcessStat.completeNum
						}}</view>
						<view class="be">审批通过</view>
					</view>
					<view class="flex-1 flex-column ac" v-if="sealIndex === 0">
						<view class="mb20 c10">{{
							myProcessStat.refuseNum
						}}</view>
						<view class="be">审批拒绝</view>
					</view>
					<view class="flex-1 flex-column ac" v-if="sealIndex === 1">
						<view class="mb20 c10">{{
							myProcessStat.auditProcessNum
						}}</view>
						<view class="be">待处理</view>
					</view>
					<view class="flex-1 flex-column ac" v-if="sealIndex === 1">
						<view class="mb20 c10">{{
							myProcessStat.auditFinishNum
						}}</view>
						<view class="be">处理完成</view>
					</view>
					<view class="flex-1 flex-column ac" v-if="sealIndex === 1">
					</view>
				</view>
			</view>
			<view v-show="activeSegmented === 2">
				<view class="card-content mt20 mb20">
					<view class="mb30">
						<view class="c10 fw600">我发起的文件数</view>
					</view>
					<view class="flex-start">
						<view class="flex-1 flex-column ac border-r mr10">
							<view class="mb20 c10">{{
								myProcessFileStat.myStartStat.totalNum
							}}</view>
							<view class="be">全部</view>
						</view>
						<view class="flex-1 flex-column ac">
							<view class="mb20 c10">{{
								myProcessFileStat.myStartStat.processNum
							}}</view>
							<view class="be">待章盖</view>
						</view>
						<view class="flex-1 flex-column ac">
							<view class="mb20 c10">{{
								myProcessFileStat.myStartStat.completeNum
							}}</view>
							<view class="be">已盖章</view>
						</view>
						<view class="flex-1 flex-column ac">
							<view class="mb20 c10">{{
								myProcessFileStat.myStartStat.refuseNum
							}}</view>
							<view class="be">拒绝章盖</view>
						</view>
					</view>
					<!-- 文件类型 -->
					<view class="mt40 f28">
						<view class="df ac table-col-header f30">
							<view
								class="tc"
								:class="'table-tr' + index"
								v-for="(item, index) in approvelFileText"
								:key="item"
								>{{ item }}</view
							>
						</view>
						<view class="table-col-main">
							<view
								v-for="(i, inx) in myProcessFileStat.myStartStat
									.subStat"
								:key="inx"
								class="df ac as"
							>
								<view class="tc table-tr0 f4 table-tr">{{
									i.displayName
								}}</view>
								<view class="tc table-tr1 f4 table-tr">{{
									i.totalNum
								}}</view>
								<view class="tc table-tr2 f4 table-tr">{{
									i.processNum
								}}</view>
								<view class="tc table-tr3 f4 table-tr">{{
									i.completeNum
								}}</view>
								<view class="tc table-tr4 f4 table-tr">{{
									i.refuseNum
								}}</view>
							</view>
						</view>
					</view>
				</view>
				<view class="card-content mt20 mb20">
					<view class="mb30">
						<view class="c10 fw600">我审批的文件数</view>
					</view>
					<view class="flex-start">
						<view class="flex-1 flex-column ac border-r mr10">
							<view class="mb20 c10">{{
								myProcessFileStat.myAuditStat.totalNum
							}}</view>
							<view class="be">全部</view>
						</view>
						<view class="flex-1 flex-column ac">
							<view class="mb20 c10">{{
								myProcessFileStat.myAuditStat.processNum
							}}</view>
							<view class="be">待处理</view>
						</view>
						<view class="flex-1 flex-column ac">
							<view class="mb20 c10">{{
								myProcessFileStat.myAuditStat.completeNum +
									myProcessFileStat.myAuditStat.refuseNum || 0
							}}</view>
							<view class="be">处理完成</view>
						</view>
					</view>
					<!-- 文件类型 -->
					<view class="mt40 f28">
						<view class="df ac table-col-header f30">
							<view
								class="tc"
								:class="'table-tr' + index"
								v-for="(item, index) in approvelFileText"
								:key="item"
								>{{ item }}</view
							>
						</view>
						<view class="table-col-main">
							<view
								v-for="(i, inx) in myProcessFileStat.myAuditStat
									.subStat"
								:key="inx"
								class="df ac as"
							>
								<view class="tc table-tr0 f4 table-tr">{{
									i.displayName
								}}</view>
								<view class="tc table-tr1 f4 table-tr">{{
									i.totalNum
								}}</view>
								<view class="tc table-tr2 f4 table-tr">{{
									i.processNum
								}}</view>
								<view class="tc table-tr3 f4 table-tr">{{
									i.completeNum
								}}</view>
								<view class="tc table-tr4 f4 table-tr">{{
									i.refuseNum
								}}</view>
							</view>
						</view>
					</view>
				</view>
			</view>

			<view v-show="activeSegmented === 3">
				<view class="card-content mt20 mb20">
					<view class="mb30">
						<view class="c10 fw600">我发起的用印数</view>
					</view>
					<view class="flex-start">
						<view class="flex-1 flex-column ac border-r mr10">
							<view class="mb20 c10">{{
								myProcessSealStat.myStartStat &&
								myProcessSealStat.myStartStat.length > 0
									? myProcessSealStat.myStartStat
											.map((i) => i.count)
											.reduce((perv, curr) => perv + curr)
									: 0
							}}</view>
							<view class="be">全部</view>
						</view>
						<view class="flex-1 flex-column ac">
							<view class="mb20 c10">{{
								myProcessSealStat.myStartStat[0].count
							}}</view>
							<view class="be">电子印章</view>
						</view>
						<view class="flex-1 flex-column ac">
							<view class="mb20 c10">{{
								myProcessSealStat.myStartStat[1].count
							}}</view>
							<view class="be">物理印章</view>
						</view>
					</view>
					<!-- 印章数据 -->
					<view class="mt40 f28">
						<view class="df ac table-col-header f30">
							<view
								class="tc"
								:class="'table-tr-seal' + index"
								v-for="(item, index) in approvelSealText"
								:key="item"
								>{{ item }}</view
							>
						</view>
					</view>
					<view class="table-col-main c10 f28">
						<view
							class="df as"
							v-for="sealI in myProcessSealStat.myStartStat"
							:key="sealI.signType"
						>
							<view class="df ac jsc table-tr-seal0 table-tr">{{
								sealI.signType
							}}</view>
							<view>
								<view
									class="df as"
									v-for="(inx, i) in sealI.sealTypeList"
									:key="i"
								>
									<view
										class="df ac table-tr-seal1 table-tr pl10"
										>{{ inx.displayName }}</view
									>
									<view
										class="df ac jsc table-tr-seal2 table-tr"
										>{{ inx.count }}</view
									>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="card-content mt20 mb20">
					<view class="mb30">
						<view class="c10 fw600">我审批的用印数</view>
					</view>
					<view class="flex-start">
						<view class="flex-1 flex-column ac border-r mr10">
							<view class="mb20 c10">{{
								myProcessSealStat.myAuditStat &&
								myProcessSealStat.myAuditStat.length > 0
									? myProcessSealStat.myAuditStat
											.map((i) => i.count)
											.reduce((perv, curr) => perv + curr)
									: 0
							}}</view>
							<view class="be">全部</view>
						</view>
						<view class="flex-1 flex-column ac">
							<view class="mb20 c10">{{
								myProcessSealStat.myAuditStat[0].count
							}}</view>
							<view class="be">电子印章</view>
						</view>
						<view class="flex-1 flex-column ac">
							<view class="mb20 c10">{{
								myProcessSealStat.myAuditStat[1].count
							}}</view>
							<view class="be">物理印章</view>
						</view>
					</view>
					<!-- 印章数据 -->
					<view class="mt40 f28">
						<view class="df ac table-col-header f30">
							<view
								class="tc"
								:class="'table-tr-seal' + index"
								v-for="(item, index) in approvelSealText"
								:key="item"
								>{{ item }}</view
							>
						</view>
					</view>
					<view class="table-col-main c10 f28">
						<view
							class="df as"
							v-for="sealI in myProcessSealStat.myAuditStat"
							:key="sealI.signType"
						>
							<view class="df ac jsc table-tr-seal0 table-tr">{{
								sealI.signType
							}}</view>
							<view>
								<view
									class="df as"
									v-for="(inx, i) in sealI.sealTypeList"
									:key="i"
								>
									<view
										class="df ac table-tr-seal1 table-tr pl10"
										>{{ inx.displayName }}</view
									>
									<view
										class="df ac jsc table-tr-seal2 table-tr"
										>{{ inx.count }}</view
									>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 筛选 -->
		<view v-if="popupShow" class="filter-popup">
			<view class="filter-bd">
				<view :style="{ paddingTop: `calc(${navHeight}px + 200rpx)` }">
					<scroll-view
						:scroll-y="true"
						style="max-height: calc(100vh - 300rpx - 260rpx)"
					>
						<view class="df ac pl10 pr10 mt20 data-picker-box">
							<image
								src="https://yilife-oss-dev-public.oss-cn-hangzhou.aliyuncs.com/34/130595/ORG/tdzbd6utigeypkj9g0hk8kzgk.png"
								style="width: 30rpx; height: 30rpx"
								class="ml20"
							></image>
							<uni-datetime-picker
								type="date"
								v-model="filterStartDate"
								@change="chooseStartDate"
							>
								<view
									:class="filterStartDate ? 'g3' : 'c1'"
									class="tc"
								>
									{{
										filterStartDate
											? filterStartDate
											: '开始日期'
									}}
								</view>
							</uni-datetime-picker>
							<view class="w10 tc lh80 c1 f32">至</view>
							<uni-datetime-picker
								type="date"
								v-model="filterEndDate"
								@change="chooseEndDate"
							>
								<view
									:class="filterEndDate ? 'g3' : 'c1'"
									class="tc"
								>
									{{
										filterEndDate
											? filterEndDate
											: '结束日期'
									}}
								</view>
							</uni-datetime-picker>
						</view>
					</scroll-view>
				</view>
				<view class="filter-bottom">
					<button class="reset-button w45" @tap="filterReset">
						重置
					</button>
					<button class="primary-button w45" @tap="filterSubmit">
						确定
					</button>
				</view>
			</view>
			<view
				class="filter-popup-mask"
				@tap="closeFilter"
				catchtouchmove="true"
			></view>
		</view>
	</view>
</template>
<script>
import segmentedControl from '@/subPackagesIndex/components/segmented-control/segmented-control.vue'
import getDateFn from '@/common/getDateFn.js'
import { getTargetDay } from '@/common/utils.js'
import { sealNameData } from './data'
export default {
	components: { segmentedControl },
	data() {
		return {
			navHeight: 0,
			segmentedList: [
				{ text: '审批数据', value: 1 },
				{ text: '文件数据', value: 2 },
				{ text: '印章使用数据', value: 3 },
			],
			activeSegmented: 3,
			tabList: [
				{ id: 'theWeek', text: '本周', value: '' },
				{ id: 'theMonth', text: '本月', value: '' },
				{ id: 'sevenDay', text: '近7日', value: -7 },
				{ id: 'thirtyDay', text: '近30日', value: -30 },
				{ id: 'custom', text: '自定义', value: '' },
			],
			activeTab: 'theMonth',
			popupShow: false,
			filterStartDate: '',
			filterEndDate: '',
			sealNameData,
			myProcessStat: {},
			myProcessFileStat: {},
			myProcessSealStat: {},
			approvelFileText: [
				'文件类型',
				'单量',
				'待盖章',
				'已盖章',
				'拒绝盖章',
			],
			approvelSealText: ['盖章方式', '印章名称', '使用次数'],
		}
	},
	onLoad(options) {
		this.activeSegmented = Number(options.active) || 1
	},
	onShow() {
		this.clickItem(this.activeSegmented)
	},
	mounted() {
		this.navHeight = uni.getStorageSync('navHeight')
	},
	methods: {
		getData() {
			switch (this.activeSegmented) {
				case 1:
					this.getMyProcessStat()
			}
		},
		clickItem(value) {
			this.activeSegmented = value
			switch (value) {
				case 1:
					this.getMyProcessStat()
					break
				case 2:
					this.getMyProcessFileStat()
					break
				case 3:
					this.getMyProcessSealStat()
					break
			}
		},
		// 审批数据
		getMyProcessStat() {
			this.$request
				.request('wflow/wflow/seal/data/myProcessStat', {
					method: 'post',
					data: {
						startDate: getTargetDay(-180),
						endDate: getDateFn.getDate(),
					},
				})
				.then((res) => {
					if (res.status === 200) {
						this.myProcessStat = res.data
					}
				})
		},
		//文件数据
		getMyProcessFileStat() {
			this.$request
				.request('wflow/wflow/seal/data/myProcessFileStat', {
					method: 'post',
					data: {
						startDate: getTargetDay(-180),
						endDate: getDateFn.getDate(),
					},
				})
				.then((res) => {
					if (res.status === 200) {
						this.myProcessFileStat = res.data
					}
				})
		},
		// 用印数据
		getMyProcessSealStat() {
			this.$request
				.request('wflow/wflow/seal/data/myProcessSealStat', {
					method: 'post',
					data: {
						startDate: getTargetDay(-180),
						endDate: getDateFn.getDate(),
					},
				})
				.then((res) => {
					if (res.status === 200) {
						this.myProcessSealStat = res.data
					}
				})
		},
		changeTab(row) {
			this.activeTab = row.id
			if (row.id === 'custom') {
				this.popupShow = true
			} else {
				this.popupShow = false
			}
		},
		filterReset() {
			this.filterStartDate = ''
			this.filterEndDate = ''
		},
		filterSubmit() {
			this.getAllData(this.filterStartDate, this.filterEndDate)
			this.popupShow = false
		},
		// 选择开始时间
		chooseStartDate(event) {
			this.filterStartDate = event
		},
		//选择结束时间
		chooseEndDate(event) {
			this.filterEndDate = event
		},
		//关闭筛选框
		closeFilter() {
			this.popupShow = false
		},
	},
}
</script>
<style lang="scss" scoped>
.container {
	padding: 24rpx;
	padding-top: 120rpx;
}
.top-fixed {
	box-shadow: 0 0 black !important;
}
.data-picker-box {
	margin: 20rpx 30rpx 10rpx;
	border-radius: 6rpx;
	border: 2rpx solid rgba(217, 217, 217, 1);
	font-size: 32rpx;
}
.c1 {
	color: #c1c1c1;
}
.card-content {
	border: 2rpx solid #efefef;
	border-radius: 10rpx;
	padding: 30rpx 20rpx;
}
.border-r {
	border-right: 1rpx solid #efefef;
}
.a3 {
	color: #3a9bff;
}
.table-col-header {
	color: #4f4f4f;
	background-color: rgba(58, 155, 255, 0.1);
	padding: 8rpx 0;
}
.table-tr0 {
	width: 180rpx;
}
.table-tr1 {
	width: 90rpx;
}
.table-tr2 {
	width: 110rpx;
}
.table-tr3 {
	width: 110rpx;
}
.table-tr4 {
	width: 180rpx;
}
.table-tr-seal0 {
	width: 200rpx;
}
.table-tr-seal1 {
	width: 240rpx;
}
.table-tr-seal2 {
	width: 200rpx;
}
.f4 {
	color: #4f4f4f;
}
.table-col-main {
	border-bottom: 1rpx solid rgba(58, 155, 255, 0.1);
	border-left: 1rpx solid rgba(58, 155, 255, 0.1);
}
.table-tr {
	padding: 8rpx;
	border-right: 1rpx solid rgba(58, 155, 255, 0.1);
	border-bottom: 1rpx solid rgba(58, 155, 255, 0.1);
}
.as {
	align-items: stretch;
}
</style>
